<template>
  <el-container class="classEdit back-white" ref="box">
    <el-main>
      <div class="mb075">
        <el-breadcrumb separator="/" class="dib vam mr100">
          <el-breadcrumb-item> 资讯分类列表</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!classId">添加分类</el-breadcrumb-item>
          <el-breadcrumb-item v-if="classId">修改分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="text" class="dib vam" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="x-item x-item-none">
        <h5 class="mb075 x-border-bottom pdb075">
          <i class="el-icon-edit-outline mr05 dib vam"></i>
          <span class="x-fs-080 dib vam">资讯分类管理</span>
        </h5>
        <el-form label-width="100px">
          <el-form-item label="分类名称"><el-input v-model="title"></el-input></el-form-item>
          <el-form-item label="排序"><el-input v-model="weight"></el-input></el-form-item>
          <el-form-item label="设置查看权限">
            <el-checkbox v-model="level_one" name="type">游客登录可看</el-checkbox>
            <el-checkbox v-model="level_two" name="type">初级会员可看</el-checkbox>
            <el-checkbox v-model="level_three" name="type">高级会员可看</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="!classId" @click="onSubmit">添加</el-button>
            <el-button type="primary" size="medium" v-if="classId" @click="onSubmit">编辑</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>
<script type="text/ecmascript-6">
  import {createData,getDataDetail} from '../../api/api';
  let loading;
  export default{
    data() {
      return {
        classId: this.$route.query.id, //要编辑的分类id
        title: '', //分类名称
        weight: null, //排序
        level_one: false, // 游客
        level_two: false, // 初级会员
        level_three: true // 高级会员
      }
    },
    created(){
      if(this.classId){ //如果是编辑 则初始化数据
        let o = {
          "model": "Tabs",
          "with":{
          },
          "condition": {
            "tab_id": this.classId
          }
        };
        getDataDetail(o).then((data) => {
          let result = data.data.data;
          this.title = result.title;
          this.weight = result.weight;
          this.level_one = result.level_one == 1;
          this.level_two = result.level_two == 1;
          this.level_three = result.level_three == 1;
        })
      }
    },
    methods:{
      checkData(){
        if(!this.title){
          this.tip('请输入分类名称');
          return false;
        }
        if(this.weight == null){
          this.tip('请输入分类排序');
          return false;
        }
        if(!this.level_one && !this.level_two && !this.level_three){
          this.tip('请至少选择一个权限列表');
          return false;
        }
        return true;
      },
      onSubmit(){
        if(!this.checkData()){
          return;
        }
        loading = this.$loading({
          target: '.classEdit',
          text: '提交中,请稍后'
        });
        let o = {
          "model": "Tabs",
          "data": {
            title: this.title,
            uid:sessionStorage.getItem('u_id'),
            weight: this.weight,
            level_one:Number(this.level_three),
            level_two:Number(this.level_two),
            level_three:Number(this.level_one)
          }
        };
        if(this.classId){
          o.update_condition = {
            "tab_id": this.classId
          }
        }else{
          o.data.type = 5;
          o.data.resource_type = 1;
        }
        createData(o).then((data) => {
          loading.close();
          let text = this.classId ? '编辑分类' : '添加分类';
          if(data.data.code == 200){
            this.tip(text + '成功','success');
            setTimeout(() => {
              this.$router.go(-1);
            },1000)
          }else{
            this.tip(text + '失败');
          }
        })
      },
      tip(msg,type){
        this.$message({type:type ? type :  'error',message: msg});
      }
    }
  }
</script>
<style>
  .classEdit .el-input{
    width: 260px;
  }
</style>
